<template>
	<div class="picture-wall-page">
		<h1>在一起已经{{ loveDay }}天</h1>
		<div class="image-wall">
			<div v-for="item in pictureList" :key="item" class="img-box" @click="handleClick(item)">
				<img :src="item.url" alt="" />
			</div>
		</div>
		<div v-if="popupVisible" class="popup-wrapper">
			<div :class="{ popup: true, popup__closing: closing }">
				<div class="popup-wrapper-content">
					<div class="content-title">{{ showingPicture.title }}</div>
					<div class="content-content">{{ showingPicture.content }}</div>
				</div>
				<img class="popup-wrapper-image" :src="showingPicture.url" alt="" />
			</div>
		</div>
		<div
			:class="{ 'popup-mask': true, 'popup-mask__opening': popupVisible, 'popup-mask__closing': closing }"
			v-if="popupVisible"
			@click="handleClose"
		></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			popupVisible: false,
			closing: false,
			showingPicture: null,
			pictureList: [
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2023-04.jpg',
					title: '2023年4月',
					content:
						'2023年4月1日，这天是愚人节，也是我们新的故事的开篇。\n    这天我鼓足勇气约你看电影《铃芽之旅》，去了天河城逛商场。那天天气很好，时间过得也很快。\n    我们在珠江边拍下这张照片，看着珠江上缓缓驶过的游轮，我心想这是最快乐的一天，我问以后还有机会这样再这样出来吗，你说应该没有。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2023-05.jpg',
					title: '2023年5月',
					content: '2023年5月21日，这是我们第一次去外地旅游。\n    我们去顺德吃了正宗的双皮奶，逛了清晖园，领了情侣证，第一次喝库迪咖啡，这天是最甜蜜的一天。\n    这张照片是我在清晖园给你拍的，当时你还说显得腿好粗哈哈哈😂。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2023-06.jpg',
					title: '2023年6月',
					content: '2023年6月23日，这是你第一次来深圳哦。\n     那时候学校停电了，我就想带你来深圳玩一玩。那时候还是偷偷地来的，生怕家里人知道，我带你逛了我熟知的地方：壹方城、西乡街、你后来最喜欢的大仟里，还打卡了深圳图书馆、大潮起珠江博物馆，这是最特种兵的一回，我还很用心的做了攻略。\n    最后在湾区之光旁边拍了这张照，你当时不是很高兴，因为特种兵太累啦！'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2023-07.jpg',
					title: '2023年7月',
					content: '2023年7月5日，我们发现学校后边还有一个小公园。\n    那天下午，我们沿着大田东路走了好远，我们走到了一个小公园，老人孩子在无忧无虑地活动，还碰到了一个可爱的、带着笑容的大狗狗。\n    我们在公园里玩了一会，还拍下了视频和这张照片，这是你的照片中我最喜欢的，这天是最惬意的一天。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2023-08.jpg',
					title: '2023年8月',
					content: '2023年8月23日，跨越百里只为见你。\n    那时候蒲源老师召开三下乡，这是是个见你、和你拥有共同经历的好机会呀，在我们的努力下，终于在别的城市见面了啦。我们在郁南三下乡、卖黄皮、摸鱼，见识了更多。\n    这张照片是在郁南的最后一晚，我们喝着黄皮奶茶，圆满的结束这次郁南之行。在这之后，我也正式了成为蒲源的学生之一。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2023-09.jpg',
					title: '2023年9月',
					content: '2023年9月21日，那是实验室成立的第一天。\n     那天我们答辩结束，所有的同学来到10A对面的那间办公室聚会，该死的矮仔keish巴拉巴拉说一大堆，还好小猫来了，跳到桌子上给我们当桌游玩😂。\n    晚上我们就悄悄来实验室约会啦，那时候植物大战僵尸杂交版还挺火，这张照片是在你玩的很入神的时候拍的，那晚都玩到1点啦'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2023-10.jpg',
					title: '2023年10月',
					content: '2023年10月21日，那晚我们共同奋斗。\n    为了再次答辩，确保通过U创，我们特地邀请围城老师，给我们改策划书，那天改到了12点，自从有了实验室的那个学期，我们就开始越来越辛苦了，我心里满是愧疚呀。\n    看你回眸一笑的样子，心理压力就更大了呀。拍下这张照片的时候我想着，无论怎么样都想着和你在一起呀，因为你是愿意配货吃苦的人，我要让你幸福呀。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2023-11.jpg',
					title: '2023年11月',
					content: '2023年11月21日，独属于我们的gap day。\n    那天是运动会，等你走完方阵之后，我们坐地铁去了动物园，那天阳光明媚，是个出门的好日子呀。看着那些动物慵懒的样子，一整天都有好心情。\n    这张照片是当时一对年轻夫妻拍完照之后给我们拍的，因为你说那个男人很会拍。事实证明确实挺会拍的，拍的我们很般配🥰。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2023-12.jpg',
					title: '2023年12月',
					content: '2023年12月24日，宝贝生日快乐呀！\n    这是我第一次陪你过生日，我们去了天河又一城，逛了最大的优衣库，最大的桌游店废柴猫。我给你买了大捧鲜花、生日蛋糕，那天你是最幸福的。\n    我还记得这个蛋糕附带的愿望：家人身体健康、和我一直一直在一起'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-01.jpg',
					title: '2024年1月',
					content: '2024年1月1日，这是你第一次见我的朋友们。\n    我们的学校不好，也没见过好的学校是怎么样的，于是我们来到深圳大学。感受名牌大学的书香氛围，这就是好的大学和差的大学的区别吧。\n    不过我已经很幸运了，因为我遇到你了呀。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-02.jpg',
					title: '2024年2月',
					content: '2024年2月28日，结束了寒假我们又相聚啦。\n    我们来到荷兰花卉小镇，探访我小时候来过的景点。前一天还去了光明农场，那段时间，真的天天都是大鱼大肉啊，再也不想吃乳鸽宴啦。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-03.jpg',
					title: '2024年3月',
					content: '2024年3月24日，那时候我们的感情走到低谷了。\n    那时候我们经常起矛盾，难得我的朋友们来了广州，却因为我们搞得不愉快。\n   BGM桌游展也是我特别的想去的一次展会呀。希望下次能参加的更圆满一点，感情也是。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-04.jpg',
					title: '2024年4月',
					content: '2024年4月17日，未来媒体实验室正式成立！\n    我们的工作室有了名分，每位实验室的同学现在都团结在一起了，我们也变成了实验室的负责人。\n    这段时间是在学校最快乐的时光，可惜好景不长呀。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-05.jpg',
					title: '2024年5月',
					content: '2024年5月2日，我们去溜冰场滑冰。\n    说实话，我挺害怕这种运动的，但是想和你玩呀，只能拼命上了。\n    挺想把这张照片的扭屁股的动图放在这的，不过这样很突兀🤪。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-06.jpg',
					title: '2024年6月',
					content: '2024年6月16日，最不舍得过的一天。\n    这天是我拍毕业照的时候。我终将离开这里，离开我们充满共同回忆的地方，好在我的亲友、师弟妹都来祝福我了。\n    心里有一种伤感，就像《红楼梦》里的大观园一样，大厦将倾，诸芳流散。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-07.jpg',
					title: '2024年7月',
					content: '2024年7月21日，公司附近。\n    离开了学校，让我无所适从，我时时刻刻都很想念学校里的人和物，好在你也在，让我没这么痛苦。那时候我们一起上班、一起下班、一起做饭、一起生活。我觉得，这就是我们最终一起生活的样子吧。\n    简简单单，但都是爱。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-08.jpg',
					title: '2024年8月',
					content: '2024年8月11日，我的生日。\n    这是你第一次陪我过生日，你给我的生日礼物，我们两个的积木，场景是毕业那天。一下子戳中了我的心。\n    因为这是我最不能忘怀的场景。希望我们能一直在一起呀，这是那天生日蛋糕许下的愿望。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-09.jpg',
					title: '2024年9月',
					content: '2024年9月16日，我们集齐了好多好多娃娃。\n    平时真的抓了好多哈哈，按着你的想法，把这些娃娃拼成了爱心娃娃墙，这个小房间逐渐有了你的痕迹。\n    因为我想让你感觉到，被爱、被当做家人的感觉呀，可以凭自己的想法，为小家做贡献。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-10.jpg',
					title: '2024年10月',
					content: '2024年10月2日，这是我们第一次去香港。\n    为了让你和朋友能够享受香港的旅途，我特地做好了完备的攻略，我们成功特种兵打卡了大半个香港。\n    那天阳光明媚的，怎么拍都很很出片哦'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-11.jpg',
					title: '2024年11月',
					content: '2024年11月17日，人才公园。\n    11月份的生活很无聊，一切平淡的和水一样，包括人才公园。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2024-12.jpg',
					title: '2024年12月',
					content: '2024年12月，海底捞。\n    “要在吃海底捞的时候做美甲”，这是你的小小愿望，终于在生日的时候才有机会，不过那天是周末，还是做不了美甲，但是有手部护理。\n    起码手是真的变得又白又滑的，那天你也许了愿望，就像去年一样被我猜中了，连顺序都一样。\n    能跟我在一直在一起，不被家人反对。能顺利当上老师，能追寻自己的梦想。家里人能够平平安安健健康康的。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2025-01.jpg',
					title: '2025年1月',
					content: '2025年1月12日，不知道叫什么小镇了哈哈。\n    反正就是很出片！只有出片的背景才能完全显现你的美呀😘。'
				},
				{
					url: 'https://drawu.obs.cn-south-1.myhuaweicloud.com/album/2025-02.jpg',
					title: '2025年1月',
					content: '2025年1月19日，越秀公园。\n    那晚唯美的花灯、俏丽的佳人，让我想起了第一次的约会珠江边的晚上，没有比这个更棒的约会场所了。'
				}
			]
		};
	},
	computed: {
		loveDay() {
			let date = new Date() - new Date('2023-04-10');
			return Math.floor(date / 1000 / 60 / 60 / 24);
		}
	},
	mounted() {
		this.handleInit();
	},
	methods: {
		handleInit() {
			const imgBoxList = document.querySelectorAll('.img-box');
			imgBoxList.forEach((wrapper) => {
				wrapper.addEventListener('mousemove', (e) => {
					const rect = wrapper.getBoundingClientRect();
					let x = e.clientX - rect.left;
					let xFlag = x > rect.width / 2 ? 1 : -1;
					let y = e.clientY - rect.top;
					let yFlag = y > rect.height / 2 ? 1 : -1;
					const img = wrapper.querySelector('img');
					img.style.transform = `translate(${x * 0.25 * xFlag}px, ${y * 0.25 * yFlag}px) scale(2)`;
				});
				wrapper.addEventListener('mouseleave', (e) => {
					const img = wrapper.querySelector('img');
					img.style.transform = `translate(0, 0) scale(1)`;
				});
			});
		},
		handleClick(item) {
			if (!this.popupVisible) {
				this.popupVisible = true;
				this.showingPicture = item;
			}
		},
		handleClose() {
			if (!this.closing) {
				this.closing = true;
				setTimeout(() => {
					this.popupVisible = false;
					this.closing = false;
					this.showingPicture = null;
				}, 900);
			}
		}
	}
};
</script>

<style lang="scss">
.picture-wall-page {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	position: relative;
	overflow: hidden;

	.image-wall {
		$size: 100px;
		margin-top: 100px;

		display: grid;
		grid-template-columns: repeat(10, $size);
		grid-auto-rows: $size;
		place-items: start center;
		gap: 15px;

		.img-box {
			grid-column: auto / span 2;
			width: $size;
			height: $size;
			border: 5px #fff solid;
			border-radius: 10px;
			box-shadow: 5px 5px #00000020;
			transform: rotate(45deg);
			transition: all 0.3s;
			cursor: pointer;
			overflow: hidden;

			&:hover {
				transform: rotate(0) scale(1.6);
				z-index: 10;
			}

			&:nth-child(9n - 3) {
				grid-column: 2 / span 2;
			}

			img {
				object-fit: cover;
				width: $size;
				height: $size;
				transition: all 0.5s;

				&:not(:hover) {
					filter: brightness(0.8) contrast(0.8);
				}
			}
		}
	}

	.popup-mask {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: #00000080;
		transition: all 0.5s ease-in-out;
		animation: mask__opening 1s ease-in-out;

		@keyframes mask__opening {
			from {
				background-color: #00000000;
			}
			to {
				background-color: #00000080;
			}
		}

		&__closing {
			background-color: #00000000;
		}
	}

	// popup框架
	.popup-wrapper {
		width: 60%;
		height: 70%;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 100;

		.popup {
			display: flex;
			width: 100%;
			height: 100%;
			background-color: #fff;

			box-shadow: 5px 0 10px #00000030;
			animation: init 1s ease-in-out;

			@keyframes init {
				0% {
					transform: translateX(-99.9%);
					height: 0;
				}

				60% {
					height: 100%;
					transform: translateX(-99.9%);
				}

				/* 动画结束时，将容器内部元素整体平移回原始位置，实现从左往右展开的视觉效果 */
				to {
					transform: translateX(0);
				}
			}

			&__closing {
				animation: closing 1s ease-in-out;
				@keyframes closing {
					from {
						transform: translateX(0);
					}
					to {
						transform: translateX(-120%);
					}
				}
			}

			.popup-wrapper-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 20px;

				.content-title {
					font-family: Avenir, Helvetica, Arial, sans-serif;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					text-align: center;
					color: #2c3e50;
					font-size: 32px;
					letter-spacing: 0.1rem;
					font-weight: bold;
					margin: 12px;
					margin-top: 0px;
				}

				.content-content {
					flex: 1;
					overflow-y: auto;
					font-size: 16px;
					line-height: 1.5;
					text-align: justify;
					text-indent: 2em;
					margin: 12px;
					word-break: break-word;
					word-wrap: break-word;
					white-space: pre-wrap;
				}
			}

			.popup-wrapper-image {
				object-fit: cover;
			}

			img {
				width: 70%;
				height: 100%;
			}
		}
	}
}
</style>
